<template>
	<view class="content">
		<view class="hint">
			<text>为维护大家的利益，请严格遵守《平台服务规范》</text>
		</view>
		<view class="header">
			<!-- <image src="../../../static/images/my/touxiang.png" class="header-img"></image> -->
		</view>
		<form-item :required="true" title="工作地点">
				<picker :value="workAddress" :range="workAddressArr.map(e=>e.text)" @change="changeAddress">
					<view class="uni-input">{{workAddressArr.filter(e=>e.id==workAddress)[0].text}}</view>
				</picker>
			
		</form-item>
		<form-item :required="true" title="工作时间" note="全天接单请选择00:00 - 00:00">
			<template>
				<picker mode="time" class="work-time" :value="workStartTime" start="00:00" end="23:59" @change="startTimeChange">
					<view class="uni-input">{{workStartTime}}</view>
				</picker>
				<text class="interval">-</text>
				<picker mode="time" class="work-time" :value="workEndTime" start="00:00" end="23:59" @change="endTimeChange">
					<view class="uni-input">{{workEndTime}}</view>
				</picker>
			</template>
		</form-item>
		<form-item :required="true" type="input" title="时薪">
			<template>
				<input :value="wage" type="number" placeholder="￥/小时"  @change="wageChange"/>
			</template>
		</form-item>
		<form-item :required="true" type="input" title="昵称">
			<template>
				<input :value="nickName" @change="nickChange"/>
			</template>
		</form-item>
		<form-item :required="true" type="input" title="手机">
			<template>
				<input :value="phone" @change="phoneChange"/>
			</template>
		</form-item>
		<form-item :required="true" title="性别">
			<template>
				<label class="radio" v-for="(item, index) in ganders" :key="item.id" @click="changeGander(item)">
					<radio :value="item.id" :checked="item.id == gander" />{{item.text}}</label>
			</template>
		</form-item>
		<form-item title="生日">
			<template>
				<picker mode="date" :value="birthday" :start="'1990-01-01'" :end="currentDate" @change="birthdayChange">
					<view class="uni-input">{{birthday || "编辑你的出生日期"}}</view>
				</picker>
			</template>
		</form-item>
		<form-item title="标签" inputAlign="left">
			<template>
				<view @click="showTagsPicker" class="uni-input">
					{{tags.map(e=>e.text).join(',')}}
				</view>
			</template>
		</form-item>
		<form-item title="签名" type="input">
			<template>
				<input :value="signature" @change="signatureChange"/>
			</template>
		</form-item>
		<view class="select-protocol">
			<label style="transform:scale(0.7)">
				<checkbox :checked="false" />
			</label>
			<text>同意</text>
			<text class="select-protocol-link" @click="handleService">《网咖服务协议》</text>
		</view>
		<view class="next">
			<button class="next-btn" type="warn" :disabled="true">下一步</button>
		</view>
		<uni-drawer ref="tagsFrawer" :visible="tagsDrawerView" :mask="true" mode="right">
			<view class="uni-title" style="padding:20rpx;">
				<uni-tag 
				type="error" 
				:inverted="!tags.some(e=>e.id == item.id)" 
				:text="item.text" 
				 v-for="item in allTags" 
				:key="item.id" 
				 size="small" 
				 class="all-tag" 
				 @click="checkTag(item)"
				 ></uni-tag>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import formItem from './components/form-item.vue'
	import uniTag from '../../../components/uni-tag/uni-tag.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	var ganderArray = [{
			id: "男",
			text: "男"
		},
		{
			id: "女",
			text: "女"
		}
	];
	export default {
		components: {
			formItem,
			uniTag,
			uniDrawer
		},
		data() {
			return {
				workAddressArr: [{
					id: '西安',
					text: '西安'
				}, {
					id: '成都',
					text: '成都'
				}],
				workAddress: '西安',
				workStartTime: '09:00',
				workEndTime: '18:00',
				wage: '',
				nickName: '',
				phone: '',
				gander: '男',
				birthday: '',
				currentDate: '2020-09-15',
				ganders: ganderArray,
				signature: '',
				allTags: [{
					id: 1,
					text: '吃鸡'
				}, {
					id: 2,
					text: '英雄联盟'
				}, {
					id: 3,
					text: '休闲游戏'
				}, {
					id: 4,
					text: 'Dota'
				}, {
					id: 5,
					text: '传奇'
				}, {
					id: 6,
					text: '斗地主'
				}, {
					id: 7,
					text: '植物大战讲师'
				}],
				tags: [{
					id: 1,
					text: '吃鸡'
				}, {
					id: 2,
					text: '英雄联盟'
				}, {
					id: 3,
					text: '休闲游戏'
				}, {
					id: 4,
					text: 'Dota'
				}, {
					id: 5,
					text: '传奇'
				}, {
					id: 6,
					text: '斗地主'
				}],
				tagsDrawerView: false
			};
		},
		methods: {
			bindPickerChange: function() {

			},
			showTagsPicker: function() {
				console.log("sssss");
				this.tagsPickerView = true;
				this.$refs.tagsFrawer.open();
			},
			checkTag: function(tag) {
				if (this.tags.some(e => e.id == tag.id)) {
					this.tags = this.tags.filter(e=>e.id != tag.id);
				}else{
					this.tags.push(tag);
				}
			},
			changeGander:function(gander){
				this.gander = gander.id;
			},
			handleService:function(){
				uni.navigateTo({
					url:'./components/service-terms'
				})
			},
			changeAddress:function(e){
				this.workAddress = e.detail.value;
			},
			startTimeChange:function(e){
				this.workStartTime = e.detail.value;
			},
			endTimeChange:function(e){
				this.workEndTime = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			wageChange:function(e){
				this.wage = e.detail.value;
			},
			validate:function(){
				if(!this.workAddress){
					return false;
				}
				
			}
			// bindTimeChange: function() {
			// 	console.log("x");
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.hint {
		background: #fdf5ea;
		color: #ef365b;
		font-size: 32rpx;
		text-align: center;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #bbb;
	}

	.header {
		height: 240rpx;
		line-height: 240rpx;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #bbb;
		vertical-align: middle;

		.header-img {
			width: 140rpx;
			height: 140rpx;
			border-radius: 140px;
			vertical-align: middle;
		}
	}

	.uni-input {
		text-align: right;
		height: 20px;
		vertical-align: middle;
		color: #999;
	}

	.work-time {
		display: inline-block;
		width: 210rpx;

		.uni-input {
			text-align: center;
			color: #999;
		}
	}

	.interval {
		display: inline-block;
		width: 20rpx;
	}

	.radio {
		margin-left: 40rpx;
	}

	.select-protocol {
		text-align: center;
		font-size: 28rpx;
		margin-top: 10px;
		height: 30px;
		line-height: 30px;

		&-link {
			color: #4790ce;
		}
	}

	.next {
		text-align: center;
		margin: 30px 0px;

		&-btn {
			width: 90%;
			height: 35px;
			line-height: 35px;
		}
	}

	.all-tag {
		display: inline-block;
		// padding: 0px 10rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.uni-drawer__content {
		width: 400rpx;
	}
</style>
<style>

</style>
